<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <head>
        <title></title>
        <style type="text/css">
            * {
                text-decoration: none;
            }

            html {
                height: 100%;
            }

            body {
                width: 100%;
                height: 100%;
                margin: 0;
            }

            footer {
                position: fixed;
                display: flex;
                height: 55px;
                width: 100%;
                background-color: white;
                border-top: 1px solid #e8e8e8;
                bottom: 0;
            }

            footer a {
                background: no-repeat center 10px;
                display: block;
                color: #7f7f7f;
                text-align: center;
                width: 25%;
                height: 100%;
                padding-top: 40px;
                font-size: 12px;
                background-size: 21px;
            }

            footer a:nth-child(1) {
                background-image: url(img/msgn.png);
            }

            footer a:nth-child(2) {
                background-image: url(img/ctan.png);
            }

            footer a:nth-child(3) {
                background-image: url(img/pyqn.png);
            }

            footer a:nth-child(4) {
                background-image: url(img/men.png);
            }

            a.active {
                color: #2aa515;
            }
   
            #wx.active {
                background-image: url(img/msgs.png);
            }

            #txl.active {
                background-image: url(img/ctas.png);
            }

            #fx.active {
                background-image: url(img/pyqs.png);
            }

            #wo.active {
                background-image: url(img/mes.png);
            }

            nav {
                width: 100%;
                height: 64px;
                color: white;
                text-align: center;
                position: fixed;
                top: 0;
                background-color: black;
                font-size: 17px;
                line-height: 78px;
            }

            section {
                height: 100%;
                width: 100%;
                margin-top: 64px;
                background-color: #eaeaea;
            }

            table {
                width: 100%;
                border: 0;
                border-spacing: 0px
            }

            table tr {
                width: 100%;
            }

            td {
                border-bottom: 1px solid #b9b9b9;
                background-color: white;
            }

            .cell {
                height: 70px;
                display: flex;
            }

            .cell img {
                width: 50px;
                height: 50px;
                margin: 10px;
                vertical-align: middle;
            }

            .cell .content {
                flex: 1;
            }

            .title {
                font-weight: bold;
                margin-top: 10px;
            }

            .subtitle {
                color: #a9a9a9;
                font-size: 14px;
                line-height: 20px;
            }

        </style>
    </head>
    <body>
        <nav>微信</nav>
        <section class="s1">
            <table>
                <tr>
                    <td>
                        <div class="cell">
                            <img src="img/headicon.jpg">
                            <div class="content">
                                <p class="title">郭大侠</p>
                                <p class="subtitle">郭大侠</p>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="cell">
                            <img src="img/headicon.jpg">
                            <div class="content">
                                <p class="title">郭大侠</p>
                                <p class="subtitle">郭大侠</p>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="cell">
                            <img src="img/headicon.jpg">
                            <div class="content">
                                <p class="title">郭大侠</p>
                                <p class="subtitle">郭大侠</p>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="cell">
                            <img src="img/headicon.jpg">
                            <div class="content">
                                <p class="title">郭大侠</p>
                                <p class="subtitle">郭大侠</p>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </section>
        <footer>
            <a href='javascript:void(0)' id='wx' class="active">微信</a>
            <a href='javascript:void(0)' id='txl'>通讯录</a>
            <a href='javascript:void(0)' id='fx'>发现</a>
            <a href='javascript:void(0)' id='wo'>我</a>
        </footer>
    </body>
    <script>
        var linkArr = document.querySelectorAll('a');
        var title = document.querySelector('nav');
        var s1 = document.querySelector('.s1');
        var s2 = document.querySelector('.s2');
        var s3 = document.querySelector('.s3');


        for (var i = 0; i < linkArr.length; i++) {
            var link = linkArr[i];
            link.tag = i;
            link.onclick = tabbarClickAction;
        }
        function tabbarClickAction(event) {
            resetStatus();
            var target = event.currentTarget;
            if (target.tag === 0) {
            	s1.style.display = 'block';
            }

            target.className = 'active';
            title.innerText = target.text;
        }
        function resetStatus() {
        	s1.style.display = 'none';


            for (var i = 0; i < linkArr.length; i++) {
                var link = linkArr[i];
                link.className = '';
            }
        }
    </script>
</html>
